let circles = document.querySelectorAll('.circle')
let index = 1
let pre = document.querySelector(".pre");
let next = document.querySelector(".next");

next.addEventListener(
	"click",
	debounce((e) => {
		if (index === circles.length) {
			next.disabled = true;
			return;
		}
		circles[index].classList.add("active");
		index++;
		pre.disabled = false;
	},500)
);

pre.addEventListener(
	"click",
	debounce((e) => {
		if (index === 1) {
			pre.disabled = true;
			return;
		}
		index--;
		circles[index].classList.remove("active");
		next.disabled = false;
	},500)
);

function debounce(fn, t = 500) {
    let timer;
    return function () {
        let args = arguments
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            timer = null
            fn.apply(this,args)
        }, t);
    }
}